<template>
  <div class="page">
    <m-header :title="langText&&langText.flash" :canback="Boolean(1)">
        <span class="top" @click="$router.push({name:'CenterRecord',query:{type:status?'usdt':'fc'}})">{{langText&&langText.redemptionrecord}}</span>
    </m-header>
    <section class="body">
      <form class="tj-form">
          
        <div class="form-item" @click="change">
            <span v-if="status">{{langText&&langText.usdt}} <i class="iconfont iconzhuanhuan mark"  ></i> {{langText&&langText.fc}}</span>
            <span v-else>{{langText&&langText.fc}} <i class="iconfont iconzhuanhuan mark" ></i> {{langText&&langText.usdt}}</span>
            
        </div>
        <div class="form-item">
          <label for="name" class="title">{{langText&&langText.tokenbalance}}</label>
          <input
            type="text"
            :placeholder="status?balance+' '+(langText&&langText.usdt):balance+' '+(langText&&langText.fc)"
            class="inp"
            readonly
          />
        </div>
        <!-- <div class="form-item">
          <label for="name" class="title">USDT → FC</label>
          <input
            type="text"
            :placeholder="status?`1USDT = ${inpText}FC`:`1FC = ${inpText}USDT`"
            readonly
            class="inp"
          />
        </div> -->
        <div class="form-item">
          <label for="name" class="title" v-show="status">{{langText&&langText.usdt}} → {{langText&&langText.fc}}</label>
          <label for="name" class="title" v-show="!status">{{langText&&langText.fc}} → {{langText&&langText.usdt}}</label>
          <input
            type="text"
            :placeholder="text"
            readonly
            class="inp sm_title"
          />
        </div>
        
        <div class="form-item" >
          <label for="name" class="title">{{langText&&langText.quantity}}</label>
          <input
            type="number"
            :placeholder="langText&&langText.petq"
            v-model="amount"
            class="inp"
          />
        </div>
      </form>
      <!-- <p class="p_text">{{text}}</p> -->
      <button type="button" class="btn-submit btn-origin sm-btn" @click="exchange">{{langText&&langText.determine}}</button>
    </section>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Init, Base,Owner } from "@/server/server.js";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";

export default {
  components: {},
  data() {
    return {
      allTxt:null,
      amount:null,
      type:null,
      status:true,
      balance:null,
      inpText:null,
      langText:null,
      text:null
    };
  },
  mounted(){
    this.initDate();
    this.exchangeRate()
  },
  computed: {
    ...mapGetters(['getLangId'])
  },
  methods: {
    initDate(){
      this.type = this.$route.query.type;
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
    },
    exchange(){
      Owner.exchange({type:this.status?'fc':'usdt',amount:this.amount}).then(res=>{
        mui.toast(res.msg)
        if(res.code==1){
          this.exchangeRate();
          this.amount = null;
          // setTimeout(()=>{this.$router.go(0)},500)
        }
      })
    },
    change(){
      this.status = !this.status;
      this.exchangeRate();
      console.log(this.balance,this.inpText)
    },
    exchangeRate(){
      Owner.exchangeRate().then(res=>{
        // if(res.code==1){
          
        // }else{
        //   mui.toast(res.msg)
        // }
        this.balance = this.status?res.data.usdt.usdt:res.data.fc.fc;
        this.inpText = this.status?res.data.usdt.exchange_usdt_rate:res.data.fc.exchange_fc_rate;
        this.text = this.status?res.data.usdt.tip:res.data.fc.tip;
      })
    }
  }
};
</script>

<style scoped lang="less">
@import "~link-less";
.body {
  background-color: @bg-color;
  .tj-form {
    margin-top: 0;
    // background:rgba(255,255,255,1);
    background:#fff;
    box-shadow:0px 1px 0px 0px rgba(219,218,218,0.5);
    border-radius:10px;
    margin: 20px;
    padding: 30px 20px;
    .form-item {
      display: flex;
      justify-content: space-between;
      margin-top: 26px;
      &:first-child{margin-top: 0}
      .title{
        width: 220px;
        line-height: 80px;
        font-size:28px;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
      .sm_title{
          &::-webkit-input-placeholder{
            font-size: 20px;
          }
      }
      .inp{
        // flex: 1;
        padding: 0 !important;
        margin: 0;
        width: 460px;
        background:rgba(238,238,238,1);
        border-radius:10px;
        border: none;
        padding-left: 30px !important;
        color: #000;
      }
    }
  }
  .sm-btn{
    width: 710px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    margin-left: 20px;
  }
}

  .top{
      position: absolute;
      right: 30px;
      top: 0;
      color: #666666;
      font-size:24px;
  }
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
.p_text{
  color: #aaa;
  margin: 20px;
}
</style >


